<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
请输入: <input id="content" type="text"/>
<button onclick="sendMsg()">发送</button>
<button onclick="closeWebsocket()">关闭</button>
<ul id="msgList"></ul>
</body>
<script>
    let socket = new WebSocket('ws://127.0.0.1:8889/websocket/zhangsan/1001?name=路径参数1&age=15');

    /**
     * 指定连接成功后的回调
     * @param event
     */
    socket.onopen = function (event) {
        console.log("建立连接成功");
    }

    /**
     * 发送消息给服务器
     */
    function sendMsg() {
        let content = document.querySelector('#content');
        // 使用websocket发送消息到服务器
        socket.send(content.value);
    }

    /**
     * 收到服务器的消息时的回调
     * @param ev
     */
    socket.onmessage = function (ev) {
        console.log("收到服务器消息: " + JSON.stringify(ev))
        let ul = document.querySelector('#msgList');
        let li = document.createElement('li');
        li.innerText = ev.data;
        ul.appendChild(li);
    }

    /**
     * 手动关闭 websocket
     */
    function closeWebsocket() {
        socket.close();
    }

    /**
     * 指定连接关闭后的回调
     * @param event
     */
    socket.onclose = function (event) {
        console.log("连接关闭");
    }
</script>
</html>